---
type: tutorial
title: Crea un pie de página para redes sociales
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Crea un nuevo componente desde cero y añádelo a tus páginas
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Crear un componente de pie de página
  - Crear y pasar props a un componente de redes sociales
</PreCheck>

Ahora que ya has utilizado componentes de Astro en una página, ¡es hora de utilizar un componente dentro de otro componente!

## Crea un componente de pie de página

<Steps>
1. Crea un nuevo archivo en la ubicación `src/components/Footer.astro`.

2. Copia el siguiente código en tu nuevo archivo, `Footer.astro`.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>¡Más información sobre mis proyectos en <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
    ```
</Steps>

### Importa y utiliza `Footer.astro`

<Steps>
1. Añade la siguiente import al frontmatter de cada una de tus tres páginas de Astro (`index.astro`, `about.astro`, y `blog.astro`):

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. Añade un nuevo componente `<Footer />` en tu plantilla de Astro en cada página, justo antes de la etiqueta de cierre `</body>` para mostrar tu pie de página en la parte inferior de la página. 

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. En la vista previa de tu navegador, comprueba que puedes ver el nuevo texto del pie de página en cada página.
</Steps>

<Box icon="puzzle-piece">

## Pruébalo tu mismo - Personaliza tu pie de página

Personaliza tu pie de página para mostrar varias redes sociales (por ejemplo, Instagram, Twitter, LinkedIn) e incluye tu nombre de usuario para enlazar directamente con tu propio perfil.

</Box>

### Registro de códigos
Si has seguido cada paso del tutorial, tu archivo `index.astro` debería tener este aspecto:

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Página de inicio';
---

<html lang="es">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## Crea un componente de redes sociales

Dado que puedes tener varias cuentas online a las que enlazarte, puedes crear un único componente reutilizable y mostrarlo varias veces. Cada vez, le pasarás diferentes propiedades (`props`) para que las use: la plataforma online y tu nombre de usuario allí.

<Steps>
1. Crea un nuevo archivo en la ubicación `src/components/Social.astro`.

2. Copia el siguiente código en tu nuevo archivo, `Social.astro`.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### Importa y utiliza `Social.astro` en el pie de página

<Steps>
1. Cambia el código en `src/components/Footer.astro` para importar, luego usa este nuevo componente tres veces, pasando diferentes **atributos de componente** como props cada vez:

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>¡Más información sobre mis proyectos en <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. Comprueba la vista previa de tu navegador y deberías ver tu nuevo pie de página mostrando enlaces a estas tres plataformas en cada página.
</Steps>

## Estiliza tu componente de redes sociales

<Steps>
1. Personaliza la apariencia de tus enlaces añadiendo una etiqueta `<style>` a `src/components/Social.astro`.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. Añade una etiqueta `<style>` a `src/components/Footer.astro` para mejorar el diseño de tu contenido.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. Comprueba de nuevo la vista previa de tu navegador y confirma que cada página muestra un pie de página actualizado.
</Steps>

<Box icon="question-mark">

### Ponte a prueba

1. ¿Qué línea de código hay que escribir en el frontmatter de un componente de Astro para recibir los valores de `title`, `author` y `date` como props?

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="Mi primera publicación" author="Juan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
    

2. ¿Cómo **pasar valores como props** a un componente de Astro?
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="Mi primera publicación" author="Juan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
</Box>



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Puedo crear nuevos componentes `.astro` en `src/components/`.
- [ ] Puedo importar y utilizar componentes de Astro dentro de otros componentes de Astro.
- [ ] Puedo pasar props a un componente de Astro.
</Checklist>
</Box>

### Recursos

- [Componentes props en Astro](/es/basics/astro-components/#props-de-componentes)